<template>
  <view class="content">
    <button size="mini" style="margin-top: 10px;" @click="downloadPdfPreview">下载Pdf文件-预览-uniapp的app中才可以</button>
    <button size="mini" type="warn" style="margin-top: 10px;" @click="pdfPreview(2)">pdf预览-uniapp-webview-pdf.js
    </button>
    <button size="mini" type="warn" style="margin-top: 10px;" @click="pdfPreview(1)">pdf预览-window-pdf.js</button>
  </view>
</template>

<script>
export default {
  name: "pdf",
  data() {
    return {
      h5Base: '/msb',
      pdfUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-67dcfd0c-c143-49dd-81a6-3d6aabd6ef7b/fcd05508-a510-446c-9ef5-85f8ec929bb4.pdf',
    }
  },
  methods: {
    downloadPdfPreview() {
      uni.downloadFile({
        url: this.pdfUrl,
        success: function (res) {
          let filePath = res.tempFilePath;
          console.log("filePath", filePath)
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功');
            }
          });
        }
      });
    },
    pdfPreview(type = 1) {
      if (type == 1) {
        //一、通过这种方式打开
        window.open(`${this.h5Base}/hybrid/html/web/viewer.html?file=${encodeURIComponent(this.pdfUrl)}`);
      } else {
        // 二、通过这种方式打开
        uni.navigateTo({
          url: '/pages/index/webview?title=pdf预览&pdfUrl=' + encodeURIComponent(this.pdfUrl)
        })
      }
    },
  }
}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
